import React from 'react';
import Axios from 'axios';
import { Link } from 'react-router-dom';
import { apiPrefix } from 'shared/api';


class SocialInsurance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      insurances: []
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}/wdy_wage/api/v1/wage/insurances`;
    Axios.get(api)
      .then((response) => {
        this.setState({ insurances: response.data.data });
        console.log(this.state.insurances);
      });
  }
  render() {
    const { insurances } = this.state;
    return (
      <div className="content">
        <div>
          <h3>
            社保基数管理
            <Link to="/AttendanceAndWage/SocialInsuranceForm" className="addButton" style={{ float: 'right' }}>添加社保基数</Link>
          </h3>
          <table style={{ width: '99%' }}>
            <thead>
              <tr>
                <th className="w50">序号</th>
                <th className="w120">社保基数档位</th>
                <th className="w120">养老保险</th>
                <th className="w120">基本医疗保险</th>
                <th className="">失业医疗保险</th>
                <th className="">社保总额</th>
                <th className="w120" />
              </tr>
            </thead>
            <tbody>
              {
                insurances.map((value, index) => (
                  <tr key={index}>
                    <td>{index + 1}</td>
                    <td>{value.name}</td>
                    <td>{value.medical}</td>
                    <td>{value.pension}</td>
                    <td>{value.unem}</td>
                    <td>{value.amount}</td>
                    <td><Link to={`/AttendanceAndWage/SocialInsuranceForm/${value.id}`} className="queryButton">编辑</Link></td>
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default SocialInsurance;
